<template class="container">
    <div class="header">
        <div style="height: 100%; width: 300px; display: flex; align-items: center;">
            <div tooltip="编译并运行" class="btn" style="width:62px;height:30px;background:url(@/textures/code_32bits.png#152 64 62 30);" onclick=OnClickRun></div>
            <div tooltip="重置" class="btn" style="width:62px;height:30px;background:url(@/textures/code_32bits.png#89 42 62 30);" onclick=OnClickRestart></div>
        </div>
       
        <div style="height: 100%; display: flex; align-items: center;">
            <!-- <div tooltip="编译并运行" class="btn" style="width:35px;height:39px;background:url(@/textures/code_32bits.png#91 76 35 39);" onclick=CloseWindow></div> -->
        </div> 
    </div>
    <Blockly ref="blockly" class="blockly" v-bind:ToolBoxXmlText="ToolBoxXmlText"></Blockly>
    <!-- <Blockly ref="blockly" class="blockly" v-bind:ToolBoxXmlText="ToolBoxXmlText" v-bind:language="language or 'SystemGIBlock'"></Blockly> -->
</template>

<script type="text/lua">
local BlocklyEl = nil;

-- 组件解析完成
function OnReady()
    BlocklyEl = GetRef("blockly");

    _G.GetCode = function()
        local rawcode, prettycode = BlocklyEl:GetCode();
        return string.gsub(prettycode, "\t", "    ");
    end

    _G.GetXml = function()
        local xmlNodeText = BlocklyEl:SaveToXmlNodeText();
        return xmlNodeText;
    end

    BlocklyEl:LoadFromXmlNodeText(_G.xmltext);
end

local function GetCode()
    if (not BlocklyEl) then return end
    local rawcode, prettycode = BlocklyEl:GetCode();
    return rawcode;
end

function OnClickRun()
    if (type(rawget(_G, "run")) == "function") then _G.run(GetCode()) end
end

function OnClickRestart()
    if (type(rawget(_G, "restart")) == "function") then _G.restart() end
end


</script>

<style>
.container {
    height: 100%; 
    width: 100%; 
    padding: 0px 2px 2px 2px;
    background-color: #a37c2d;
}

.header {
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px;
}

.blockly {
    position: absolute; 
    left: 0px; 
    right: 0px; 
    top: 40px; 
    bottom: 0px;
}

.btn {
    background-color: #cccccc;
}
</style>
